/* eslint-disable react/jsx-indent */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Col, Timeline } from 'antd';
import moment from 'moment';
import DescriptionList from '@/components/DescriptionList';

// const FormItem = Form.Item;
const { Description } = DescriptionList;
class AddEmpNameInfor extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { remarklist, matlist, insCardHdl, sendLoading } = this.props;
    const flag = matlist && matlist.length;
    if (!sendLoading) {
      return (
        <div>
          <Card
            title={<span style={{ fontWeight: 'bolder' }}>材料信息</span>}
            style={{ marginBottom: 16 }}
            bordered={false}
          >
            <DescriptionList>
              <Description term="原件材料">
                {insCardHdl.masterFileName ? insCardHdl.masterFileName : '--'}
              </Description>
              <Description term="复印件材料">
                {insCardHdl.copyFileName ? insCardHdl.copyFileName : '--'}
              </Description>
              <Description term="材料是否完整">{insCardHdl.matFlagName}</Description>
              {flag
                ? matlist.map(item => (
                    <Description key={item.matId} term={item.matName}>
                      {item.inpVal}
                    </Description>
                  ))
                : null}
            </DescriptionList>
          </Card>
          <Card
            title={<span style={{ fontWeight: 'bolder' }}>发放信息</span>}
            style={{ marginBottom: 16 }}
            bordered={false}
          >
            <DescriptionList>
              <Description term="发放方式">
                {insCardHdl.issWayName ? insCardHdl.issWayName : '--'}
              </Description>
              <Description term="邮寄地址">
                {insCardHdl.exprsAddr ? insCardHdl.exprsAddr : '--'}
              </Description>
              <Description term="快递单号">
                {insCardHdl.exprsNo ? insCardHdl.exprsNo : '--'}
              </Description>
              <Description term="快递公司">
                {insCardHdl.exprsCorpName ? insCardHdl.exprsCorpName : '--'}
              </Description>
              <Description term="备注">
                {insCardHdl.issRemark ? insCardHdl.issRemark : '--'}
              </Description>
            </DescriptionList>
          </Card>
          <Card
            title={<span style={{ fontWeight: 'bolder' }}>办理备注</span>}
            style={{ marginBottom: 16 }}
            bordered={false}
          >
            {remarklist && remarklist.length ? (
              <Col
                style={{
                  paddingTop: 14,
                  marginTop: 14,
                  height: 200,
                  minHeight: 200,
                  overflow: 'hidden',
                  overflowY: 'scroll',
                }}
              >
                <Timeline>
                  {remarklist.map(item => (
                    <Timeline.Item key={item.operTime}>
                      <p>
                        <span style={{ marginRight: 18 }}>
                          {item.operTime ? moment(item.operTime).format('YYYY-MM-DD') : '--'}
                        </span>
                        <span>{item.operName}</span>
                      </p>
                      <p>{item.content}</p>
                    </Timeline.Item>
                  ))}
                </Timeline>
              </Col>
            ) : (
              '暂无数据'
            )}
          </Card>
        </div>
      );
    }
    return null;
  }
}

export default Form.create()(AddEmpNameInfor);
